<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- bootstrap css -->
    <link rel="stylesheet" href="./bootstrap.min.css" />
    <style>
      #liveAlertPlaceholder {
        position: fixed;
        top: 8px;
        left: 20%;
        right: 20%;
      }

      .row + .row {
        margin-top: 16px;
      }
    </style>
  </head>

  <body>
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">灵动系统</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="./index.html"
                >学习</a
              >
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./图书.html">图书</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./问题.html">问题</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./目标.html">目标</a>
            </li>
          </ul>
          <form class="d-flex" role="search">
            <input
              class="form-control me-2"
              type="search"
              placeholder="Search"
              aria-label="Search"
            />
            <button class="btn btn-outline-success" type="submit">
              Search
            </button>
          </form>
        </div>
      </div>
    </nav>

    <div class="container">
      <button
        type="button"
        class="btn btn-primary mb-2"
        data-bs-toggle="modal"
        data-bs-target="#exampleModal"
      >
        新增学习目标
      </button>
      <div class="row">
        <div class="col-4"></div>
        <div class="col-4"></div>
        <div class="col-4"></div>
      </div>
    </div>

    <div
      class="modal fade"
      id="exampleModal"
      tabindex="-1"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">
              新增学习目标
            </h1>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <form id="studyForm">
              <div class="mb-3">
                <label for="recipient-name" class="col-form-label"
                  >学习目标:</label
                >
                <input type="text" class="form-control" id="recipient-name" />
              </div>
              <div class="mb-3">
                <label for="message-text" class="col-form-label"
                  >目标内容:</label
                >
                <textarea class="form-control" id="message-text"></textarea>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              关闭
            </button>
            <button id="saveBtn" type="button" class="btn btn-primary">
              保存
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      class="modal fade"
      id="exampleModal2"
      tabindex="-1"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel2">
              新增学习目标
            </h1>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <form id="studyForm2">
              <div class="mb-3">
                <label for="recipient-name2" class="col-form-label"
                  >学习目标:</label
                >
                <input type="text" class="form-control" id="recipient-name2" />
              </div>
              <div class="mb-3">
                <label for="message-text2" class="col-form-label"
                  >目标内容:</label
                >
                <textarea class="form-control" id="message-text2"></textarea>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              关闭
            </button>
            <button id="saveBtn2" type="button" class="btn btn-primary">
              保存
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 消息提示 -->
    <div id="liveAlertPlaceholder"></div>

    <!-- bootstrap js -->
    <script src="./bootstrap.bundle.min.js"></script>
    <!-- axios -->
    <script src="axios.min.js"></script>
    <script>
      // 消息提示
      const alertPlaceholder = document.getElementById("liveAlertPlaceholder");
      const appendAlert = (message, type) => {
        const wrapper = document.createElement("div");
        wrapper.innerHTML = [
          `<div class="alert alert-${type} alert-dismissible" role="alert">`,
          `   <div>${message}</div>`,
          '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
          "</div>",
        ].join("");

        alertPlaceholder.append(wrapper);
      };

      // 获取表单和保存按钮
      const form = document.querySelector("#studyForm");
      const saveBtn = document.querySelector("#saveBtn");

      form.addEventListener("submit", (e) => {
        e.preventDefault();
        addGoal();
      });
      saveBtn.addEventListener("click", () => {
        addGoal();
      });

      function addGoal() {
        // 获取用户输入
        const input = form.querySelector("input");
        const textarea = form.querySelector("textarea");
        // 调用接口
        axios
          .post("http://localhost:4090/ceep", {
            goal: input.value, // 目标
            content: textarea.value, // 目标内容
          })
          .then(() => {
            // 获取弹窗对象
            const modal = bootstrap.Modal.getInstance("#exampleModal");
            // 关闭弹窗
            modal.hide();
            // 提示消息
            appendAlert("保存成功", "success");
          });
      }

      // 写一个函数，获取数据，渲染页面
      function getList() {
        axios.get("http://localhost:4090/ceep").then(({ data }) => {
          const cardArray = data.map(
            (item) => `<div class="card">
            <img
              src="https://tse2-mm.cn.bing.net/th/id/OIP-C.UqvvLFmb8aLdeDs8_P6VLwHaEK?w=312&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7"
              class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">${item.goal}</h5>
              <p class="card-text">${item.content}</p>
                <button class="btn btn-primary" data-id=" ${item.id}">编辑</button>
        <button class="btn btn-danger" data-id=" ${item.id}>删除</button>
            </div>
          </div>`
          );
          // 数据分组
          // 写一个大分组
          const total = [];
          // 写一个小分组
          let group = [];
          // 遍历卡片数组，来分组
          cardArray.forEach((card) => {
            if (group.length < 3) {
              group.push(card);
            } else {
              // 满3个，把小组推入大组
              total.push(group);
              // 开一个新小组
              group = [card];
            }
          });
          // 判断还有没有剩余
          if (group.length) {
            total.push(group);
          }
          // 每一组是一行
          const rowArray = total.map(
            (row) => `<div class="row">
        ${row
          .map(
            (i) => `<div class="col-4">${i}
        </div>`
          )
          .join("")}
        </div>
      </div>`
          );

          // 把多行拼起来放到网页中
          const html = rowArray.join("");
          // 插入到页面
          const container = document.querySelector(".container");
          container.innerHTML =
            `<button type="button" class="btn btn-primary mb-2" data-bs-toggle="modal"
        data-bs-target="#exampleModal">新增学习目标</button>` + html;
        });
      }
      // 首次渲染
      getList();
      // 获取容器
      const container = document.querySelector(".container");
      container.addEventListener("click", ({ target }) => {
        // 处理按钮点击
        if (target.tagName == "BUTTON") {
          if (target.innerHTML == "编辑") {
            console.log("编辑");
          } else if (target.innerHTML == "删除") {
            console.log("删除");
          }
        }
      });
    </script>
  </body>
</html>
